<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { useScrollTransparentNavbar } from '@/hooks'
import user from '@/api/user.js'
import { FILE_URL } from '@/api/config.js'

const paging = ref(null)
useZPaging(paging)
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  replyData: [],
})

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const navCirclesPostDetailPage = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/detail?circlesPostId=${circlesPostId}`)
}
const queryList = (pageNo: any, pageSize: any) => {
  user
    .mineReply({
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      paging.value.complete(res.data)
    })
    .catch((err: any) => {
      console.log(err, 'mineReply')
      paging.value.complete(false)
    })
}

onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      我的评论
    </TnNavbar>
    <view class="container">
      <view class="tn-mt-sm">
        <z-paging
          ref="paging"
          v-model="state.replyData"
          :paging-style="{ paddingTop: `${navbarHeight + 10}px` }"
          :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true"
          @query="queryList"
        >
          <view class="">
            <view
              v-for="(item, index) in state.replyData"
              :key="index"
              class="tn-flex user-lists"
            >
              <view
                class="tn-pl-sm"
                @click="navCirclesPostDetailPage(item.circlesPost.id)"
              >
                <view class="tn-text-ellipsis" style="color: #7d7d7d">
                  <view class="tn-text-sm" style="color: #78909c">
                    <TnTag
                      v-if="item.status != '20'"
                      type="warning"
                      size="sm"
                      :custom-style="{
                        fontSize: '10px',
                        lineHeight: '12px',
                        borderRadius: '2px',
                        padding: '2px 4px',
                      }"
                    >
                      <text v-if="item.status == '10'">审核中</text>
                      <text v-else-if="item.status == '30'">已违规</text>
                    </TnTag>
                    回复：{{ item.content }}
                  </view>
                  <view class="tn-mt-sm">
                    <TnTitle
                      v-if="item.circlesPost"
                      :title="item.circlesPost.content"
                      size="sm"
                      mode="vLine"
                      color="#080808"
                      assist-color="#ccf2ff"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>

      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/reply.scss';
</style>
